import * as api from '../../util/api';
import React,{Component} from 'react';
import {Button ,Input ,Modal} from 'antd';
import axios from 'axios';
import './pro.css'
import { Table, Divider, Tag } from 'antd';
export default class Dong extends React.Component {
	
  state = { visible: false , list:[] ,id:''};
  showModal = () => {
    this.setState({
      visible: true,
	 
    });
  };
  hideModal = () => {
    this.setState({
      visible: false,
    });
  };
  addModal = () => {
	  var name = this.refs.tit.value
	  var quantity = this.refs.tit1.value
	  var price = this.refs.tit2.value
	  var coverImg = this.refs.tit3.value
	  var descriptions = this.refs.tit4.value
	  var productCategory = this.refs.tit5.value
	  console.log(name)
	  console.log(quantity)
	  console.log(price)
	  console.log(coverImg)
	  console.log(descriptions)
	  let params = {name,quantity,price,coverImg,descriptions,productCategory}
	  console.log(params)
	  api.addPro(params).then((data)=>{
	  		  console.log(data.data)
	  			api.proList({per:10,page:10}).then((data)=>{
	  				console.log(data.data.products)
	  				this.setState({
	  					list:data.data.products,
						 // visible: false
	  				})
	  				
	  			})
	   })
	   this.refs.tit.value=''
	   this.refs.tit1.value=''
	   this.refs.tit2.value=''
	   this.refs.tit3.value=''
	   this.refs.tit4.value=''
	  
  };
 delete(id){
 	api.delPro(id).then((data)=>{
		console.log(data)
		api.proList({per:10,page:10}).then((data)=>{
			console.log(data.data.products)
			this.setState({
				list:data.data.products
			})
			
		})
	})
	
  }
  
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          添加商品
        </Button>
		
        <Modal
          title="添加商品"
          visible={this.state.visible}
          onOk={this.addModal}
          onCancel={this.hideModal}
          okText="确认"
          cancelText="取消"
        >
          	<p>商品名字</p>
          	<input type='text' ref='tit'/>
			<p>商品数量</p>
			<input type='text' ref='tit1'/>
          	<p>商品价格</p>
          	<input type='text' ref='tit2'/>
          	<p>商品图片</p>
          	<input type='text' ref='tit3'/>
          	<p>商品详情</p>
          	<input type='text' ref='tit4'/>
			<p>商品分类</p>
			<input type='text' ref='tit5'/>
        </Modal>
		<table style={{width:1000,height:40,border:1}}>
		      <tr>
		      <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff'}}>商品名字</td>
			  <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff'}}>商品数量</td>
		      <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff'}}>商品价格</td>
		      <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff'}}>商品图片</td>
		      <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff'}}>商品详情</td>
			  <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff'}}>商品编辑</td>
			  </tr>
			  </table>
		{
		   this.state.list.map((item,id)=>{
				return(
					<div key={id}>
					<table style={{width:1000,height:40,border:1,tableLayout:'fixed'
}}>
					<tr>
					 <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff'}}>{item.name}</td>
					 <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff'}}>{item.quantity}</td>
					 <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff'}}>{item.price}</td>
				     <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff'}}><img src={item.coverImg} style={{width: 70,
	height: 100}}/></td>
					 <td style={{width: 88,overflow:'hidden',textOverflow:'ellipsis',wordBreak:'keepAll',whiteSpace:"nowrap",height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff'}}>{item.descriptions}</td>
			         <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff'}}>
					 <Button type="primary" onClick={()=>this.delete()}>
          修改
        </Button>
			         <Button type="danger" id={item._id} onClick={()=>this.delete(item._id)}>删除</Button>
			         </td>
		          </tr>
				</table>
				</div>
			)
		})
		}
      </div>
    );
  }
  componentDidMount(){
  	var _this=this;
  	api.proList({per:10,page:10}).then((data)=>{
  		console.log(data.data.products)
  		_this.setState({
  			list:data.data.products
  		})
  		
  	})
	
	}
	}
